<template>
<div class="project task-list">
	<!-- Main jumbotron for a primary marketing message or call to action -->
	<div class="jumbotron">
		<h1>Bootstrap example</h1>
		<p>This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.</p>
	</div>


	<div class="page-header">
		<h1>Buttons</h1>
	</div>
	<p>
		<button type="button" class="btn btn-lg btn-default">Default</button>
		<button type="button" class="btn btn-lg btn-primary">Primary</button>
		<button type="button" class="btn btn-lg btn-success">Success</button>
		<button type="button" class="btn btn-lg btn-info">Info</button>
		<button type="button" class="btn btn-lg btn-warning">Warning</button>
		<button type="button" class="btn btn-lg btn-danger">Danger</button>
		<button type="button" class="btn btn-lg btn-link">Link</button>
	</p>
	<p>
		<button type="button" class="btn btn-default">Default</button>
		<button type="button" class="btn btn-primary">Primary</button>
		<button type="button" class="btn btn-success">Success</button>
		<button type="button" class="btn btn-info">Info</button>
		<button type="button" class="btn btn-warning">Warning</button>
		<button type="button" class="btn btn-danger">Danger</button>
		<button type="button" class="btn btn-link">Link</button>
	</p>
	<p>
		<button type="button" class="btn btn-sm btn-default">Default</button>
		<button type="button" class="btn btn-sm btn-primary">Primary</button>
		<button type="button" class="btn btn-sm btn-success">Success</button>
		<button type="button" class="btn btn-sm btn-info">Info</button>
		<button type="button" class="btn btn-sm btn-warning">Warning</button>
		<button type="button" class="btn btn-sm btn-danger">Danger</button>
		<button type="button" class="btn btn-sm btn-link">Link</button>
	</p>
	<p>
		<button type="button" class="btn btn-xs btn-default">Default</button>
		<button type="button" class="btn btn-xs btn-primary">Primary</button>
		<button type="button" class="btn btn-xs btn-success">Success</button>
		<button type="button" class="btn btn-xs btn-info">Info</button>
		<button type="button" class="btn btn-xs btn-warning">Warning</button>
		<button type="button" class="btn btn-xs btn-danger">Danger</button>
		<button type="button" class="btn btn-xs btn-link">Link</button>
	</p>
</div>
</template>

<script>

import TaskItem from './task-item';
import {TaskListSrv} from './task-list.service';

export default {
	name: 'task-list',
	components: {
		'task-item': TaskItem
	},
	data () {
		return {
			msg: 'Welcome to Your Vue.js App',
			msgPost: '',
			checked: true,
			activeName: 'second'
		};
	},
	methods: {
		handleClick (tab, event) {

			TaskListSrv.list('a=1&b=2').then(response => {
				this.msg = response.body;
			});

			TaskListSrv.create({'a': 1, 'b': 2}).then(response => {
				this.msgPost = response.body;
			});

			console.log('task-list.service');
		}
	},
	created: function () {
		console.log('created task list....');
	},
	mounted: function () {
		console.log('mounted task list....');

	},
	beforeRouteEnter (to, from, next) {
		console.log('enter task list....');
		next();
	},
	beforeRouteUpdate (to, from, next) {
		console.log('update task list....');
		next();
	},
	beforeRouteLeave (to, from, next) {
		console.log('leave task list....');
		next();
	}
};
</script>
